<template>
  <view>
    <view
      class="cert-bag"
      v-if="!certShow && products.length > 0"
      @click="certShow = true"
    >
      <view class="content">
        <image src="../../static/icons/cert.png"></image>
        <view :class="{ 'num-active': numActive }" class="num">{{
          products.length
        }}</view>
      </view>
    </view>
    <view class="cert" :class="{ 'cert-active': certShow }">
      <view class="other" @click="hiddenCert"></view>
      <view class="content-wrapper" :class="{ 'cert-active': certShow }">
        <view class="cert-panel">
          <view class="panel-bag">
            <view class="content">
              <image src="../../static/icons/cert.png"></image>
              <view class="num">{{ products.length }}</view>
            </view>
          </view>
          <view class="panel-triangle"></view>
          <view class="panel-top">
            <view class="panel-full">
              <u-checkbox-group>
                <u-checkbox @change="fullChoose" shape="circle" name="全选"
                  >全选
                </u-checkbox>
              </u-checkbox-group>
              <view class="tip-wrapper">
                <view class="tip">付款秒发</view>
              </view>
            </view>
            <view class="trash">
              <uni-icons type="trash" size="25"></uni-icons>
              <view class="tip" @click="clearCert">清空购物车</view>
            </view>
          </view>
          <scroll-view scroll-y="true" class="panel-center">
            <view
              class="item"
              v-for="(product, index) in products"
              v-if="products.length > 0"
            >
              <checkbox-group @change="checkboxChange(product.id)">
                <checkbox
                  color="red"
                  :value="product.id"
                  :checked="product.checked"
                />
              </checkbox-group>
              <image :src="product.cover" mode="aspectFill"></image>
              <view class="item-info">
                <view class="title">{{ product.name }}</view>
                <view class="description">{{ product.description }}</view>
                <view class="price-section">
                  <view class="price"> ￥{{ product.price }} </view>
                  <view class="count-change">
                    <uni-icons
                      class="icon"
                      type="minus"
                      size="25"
                      @tap="reduceProductCount(product)"
                    ></uni-icons>
                    <text class="num">{{ product.count }}</text>
                    <uni-icons
                      class="icon"
                      type="plus"
                      size="25"
                      color="#10AEFF"
                      @click="plusProductCount(product)"
                    ></uni-icons>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="cert-bar">
          <view class="price">￥{{ totalPrice }}</view>
          <button class="settle" @click="goback">结算</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import { Product } from "@/typings";
import Vue from "vue";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations } = createNamespacedHelpers("cert");
export default Vue.extend({
  data() {
    return {
      //点击悬浮购物车弹出购物车
      certShow: false,
    };
  },
  created() {},
  computed: {
    products() {
      return this.$store.state.cert.products as Product[];
    },
    //悬浮购物车上的数字
    numActive() {
      return this.$store.state.cert.numActive as boolean;
    },
    totalPrice() {
      let price = 0;
      this.products.forEach((prod) => {
        if (prod.checked) {
          price += prod.price * prod.count;
        }
      });
      return price.toFixed(2);
    },
  },
  methods: {
    goback() {
      console.log("结算");
      let products = this.products.filter((prod) => prod.checked == true);
      this.$emit("settle", products);
    },
    hiddenCert() {
      this.certShow = false;
    },
    ...mapMutations({
      reduceProductCount: "reduceProductCount",
      checkboxChange: "checkboxChange",
      plusProductCount: "plusProductCount",
      pushToCert: "pushToCert",
      removeProduct: "removeProduct",
      clearCert: "clearCert",
      fullChoose: "fullChoose",
    }),
  },
});
</script>

<style lang="scss" scoped>
@keyframes mymove {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(0.5);
  }

  50% {
    transform: scale(1.5);
  }

  75% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1);
  }
}

.icon {
  width: 45rpx;
  height: 40rpx;
}

.cert {
  transition: height background-color 0.3s ease;

  &.cert-active {
    z-index: 1;
    opacity: 1;
  }

  opacity: 0;
  position: fixed;
  z-index: -1;
  top: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.7);

  .other {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    z-index: 2;
  }

  .content-wrapper {
    position: fixed;
    bottom: -700rpx;
    width: 100%;
    z-index: -1;
    opacity: 0;
    transition: all 0.2s linear;

    &.cert-active {
      bottom: 0;
      z-index: 3;
      opacity: 1;
    }

    .cert-panel {
      border-top-right-radius: 30rpx;
      border-top-left-radius: 30rpx;
      background-color: white;
      display: flex;
      flex-direction: column;
      position: relative;
      bottom: 0;

      .panel-bag {
        image {
          width: 120rpx;
          height: 120rpx;
        }

        position: absolute;
        top: -150rpx;
        right: 40rpx;

        .content {
          position: relative;

          .num {
            width: 30rpx;
            height: 30rpx;
            line-height: 30rpx;
            border-radius: 50%;
            text-align: center;
            background-color: rgb(255, 0, 0);
            position: absolute;
            top: 0rpx;
            right: 0rpx;
            color: white;
          }
        }
      }

      .panel-triangle {
        width: 30rpx;
        height: 30rpx;
        background-color: white;
        position: absolute;
        top: -15rpx;
        right: 85rpx;
        transform: rotate(45deg);
      }

      .panel-full {
        display: flex;
        align-items: center;

        .tip-wrapper {
          .tip {
            display: inline-block;
            margin-left: 20rpx;
            border-radius: 10rpx;
            border: 1px solid #18b566;
            font-size: 20rpx;
            padding: 5rpx 10rpx;
            color: #18b566;
          }
        }
      }

      .panel-top {
        display: flex;
        justify-content: space-between;
        padding: 20rpx;
        border-bottom: 1px solid #f3f3f3;

        .trash {
          display: flex;
          align-items: center;

          .trash-icon {
            width: 32rpx;
            height: 32rpx;
          }

          .tip {
            margin-left: 10rpx;
            font-size: 25rpx;
            color: #b5b5b5;
          }
        }
      }

      .panel-center {
        width: 100%;
        max-height: 500rpx;
        min-height: 200rpx;

        .item {
          width: 100%;
          padding: 20rpx;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #f3f3f3;

          .choose-box {
            margin-right: 10rpx;
          }

          image {
            border-radius: 10rpx;
            height: 140rpx;
            width: 140rpx;
          }

          .item-info {
            flex: 2;
            width: 100%;
            padding-right: 20rpx;
            padding-bottom: 20rpx;
            margin-left: 30rpx;
            display: flex;
            flex-direction: column;

            .title {
              font-size: 30rpx;
              // font-weight: bold;
              margin-bottom: 10rpx;
            }
            .description {
              font-size: 28rpx;
              color: rgba($color: #000000, $alpha: 0.5);
            }
            .price-section {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 10rpx;

              .price {
                font-weight: bold;
                font-size: 30rpx;
              }

              .count-change {
                display: flex;
                align-items: center;
                margin-right: 40rpx;

                .icon {
                  margin-left: 15rpx;
                  margin-right: 15rpx;
                }
              }
            }
          }
        }
      }
    }

    .cert-bar {
      height: 100rpx;
      background-color: white;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;

      .price {
        font-size: 35rpx;
        margin-left: 20rpx;
        font-weight: bold;
      }
      .settle {
        width: 200rpx;
        height: 65rpx;
        line-height: 65rpx;
        border-radius: 32.5rpx;
        margin: 0 20rpx 0 0;
        border: 0;
        color: white;
        background-color: rgb(0, 170, 255);
      }
    }
  }
}

.cert-bag {
  z-index: 2;

  image {
    border-radius: 50%;
    width: 120rpx;
    height: 120rpx;
    box-shadow: 0upx 4upx 25upx rgba(13, 13, 13, 0.2);
  }

  position: fixed;
  bottom: 150rpx;
  right: 40rpx;

  .content {
    position: relative;

    .num {
      &.num-active {
        animation: mymove 0.5s ease-in-out;
      }

      width: 30rpx;
      height: 30rpx;
      line-height: 30rpx;
      border-radius: 50%;
      text-align: center;
      background-color: rgb(255, 0, 0);
      position: absolute;
      top: 0rpx;
      right: 0rpx;
      color: white;
    }
  }
}
</style>
